<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/styles/login.css}" href="../static/styles/login.css"/>
    <style type="text/css" th:inline="text">

    </style>
</head>
<body>
<div class="login" style="margin-top:50px;">
    <div class="header">
        <div class="switch" id="switch">
            <a class="switch_btn_focus" id="switch_qlogin" tabindex="7">登录</a>
        </div>
    </div>
    <div class="web_qr_login" id="web_qr_login" style="display: block;">
        <div class="web_login" id="web_login">
            <div class="login-box">
                <div class="login_form">
                    <div style="color: red;" th:if="${error != null}"
                         th:text="${error}">
                    </div>
                    <form class="layui-form" action="/login" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" lay-verify="username|required" placeholder="请输入用户名"
                                       autocomplete="off" class="layui-input"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" lay-verify="password|required"
                                       placeholder="请输入密码" autocomplete="off" class="layui-input"/>
                            </div>
                            <div class="layui-form-mid layui-word-aux">请填写5到16位密码</div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">验证码</label>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="verifyCode" lay-verify="verifyCode|required"
                                           placeholder="验证码" autocomplete="off" class="layui-input"/>
                                </div>
                                <div class="layui-form-mid"></div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <img style="width:100px;height:38px;" onclick="updateVerifyCode();" src=""
                                         th:src="@{/verifyCode}" alt="验证码"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="checkbox" name="rememberMe" lay-skin="primary" title="记住我"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="login">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <a href="/register">去注册</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>

<script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    function updateVerifyCode() {
        event.target.src = "/verifyCode?t=" + Date.now();
    }

    layui.use(['form'], function () {
        var form = layui.form, layer = layui.layer;

        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , password: [/(.+){5,16}$/, '密码必须5到16位']
            , verifyCode: function (value) {
                if (value.length != 6) {
                    return "验证码必须6位";
                }
            }
        });

        //监听提交
        form.on('submit(login)', function (data) {
            console.log(JSON.stringify(data.field));
        });
    });
</script>
</body>
</html>